<template>
  <el-main class="xd-el-main">
    <div class="container">
    <div class="xd-LearningHome-PoliticalNews-NewsHome p_10">
      <el-card class="m_t_b_5px news_panel" style="float: left;width: 870px;" shadow="hover">
        <div slot="header">
          <div class="title">心理咨询师</div>
        </div>
        <el-card class="box-card m_t_b_5px" shadow="hover">
          <el-form ref="form" :model="formPolicy" label-width="80px">
            <el-form-item label="类别">
              <el-radio-group v-model="formPolicy.themeType" size="small" @change="handleTypeClick">
                <el-radio-button
                  :label="item.dictValue"
                  v-for="item in themeTypeList"
                  :key="item.dictValue"
                  >{{ item.dictLabel }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="擅长领域">
              <el-radio-group v-model="formPolicy.themeType2" size="small"   @change="handleGoodAreaClick">
                <el-radio-button
                  :label="item.dictValue"
                  v-for="item in themeTypeList2"
                  :key="item.dictValue"
                  >{{ item.dictLabel }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div style="font-size: 16px">
            <a style="color: #cb2c21; margin-left: 14px">默认排序</a>
            <a style="margin-left: 38px">预约最多</a>
            <el-input
              v-model="formPolicy.trueName"
              clearable
              placeholder="搜索咨询师名称"
              style="width: 300px; margin-right: 5px; float: right"
              size="small"
            >   <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button></el-input>
          </div>
        </el-card>

        <ul class="news_list item_flex_ul"> 
          <li v-for="p in newsList" :key="p.i_id" @click="goNewsDetail(p.counselorId)">
            <el-row style="width: 500px">
              <el-col :span="4">
                <div class="block">
                  <el-avatar
                    :size="70"
                    src="@/assets/imgs/teacher.png"
                  >  <img :src="p.avatar"/>
                  </el-avatar>
                </div>
              </el-col>
              <el-col :span="18" style="font-size: 14px">
                <div style="margin-top:6px;">
                  <span
                    style="
                      font-weight: bold;
                      font-size: 18px;
                      margin-right: 12px;
                    "
                    >{{p.trueName}}</span
                  >
                  <span>近 {{p.appointSum}} 人预约&nbsp;&nbsp;&nbsp;从业 {{p.jobYear}} 年&nbsp;&nbsp;&nbsp; {{p.address}}</span>
                </div>
                <div style="margin-top:6px;"><span>注册心理师：</span> <span>{{p.registerLevel}}级心理咨询师</span></div>
              </el-col>
            </el-row>
            <span class="time"> <el-button style="color:red; border-color:#cb2c21;width:130px;" round>预约</el-button></span>
          </li>
          <p v-if="!newsList.length" class="no-data">{{ NO_DATA }}</p>
        </ul>
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="form.pageNumber"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="form.pageSize"
          :layout="PAGE_LAYOUT"
          :total="total"
        ></el-pagination>
      </el-card>
      <el-aside class="xd-el-aside" width="16vw" style="float: right;">
        <el-card class="box-card m_t_b_1vw" shadow="hover">
          <div slot="header">
            <div class="tag" style="margin-left: 20px;">我的关注</div>
          </div>
          <div
            v-for="(item, index) in topNoticeList"
            :key="'top' + index"
            class="aside-list-item"
            style="font-size: 12px; line-height: 24px"
          >
            <span style="font-weight: bold; margin-right: 10px"> {{
              item.counselorName
            }}</span>
            {{ item.createTime }}
          </div>
        </el-card>
      </el-aside>
    </div>
    </div>
  </el-main>
</template>
<script>
export default {
  name: "FaqHome",
  data() {
    return {
      form: {
        pageNumber: 1,
        pageSize: 10,
      },
      total: 0,
      newsList: [],
      formPolicy: { themeType: "", themeType2: "",trueName:'' },
      themeTypeList: [
        {
          dictValue: "",
          dictLabel: "全部类别",
        },
        // {
        //   dictValue: "1",
        //   dictLabel: "原生家庭",
        // },
        // {
        //   dictValue: "2",
        //   dictLabel: "强许",
        // },
        // {
        //   dictValue: "3",
        //   dictLabel: "抑郁",
        // },
        // {
        //   dictValue: "4",
        //   dictLabel: "心理咨询",
        // },
        // {
        //   dictValue: "5",
        //   dictLabel: "自卑",
        // },
        // {
        //   dictValue: "6",
        //   dictLabel: "分手",
        // },
        // {
        //   dictValue: "7",
        //   dictLabel: "恋爱",
        // },
        // {
        //   dictValue: "8",
        //   dictLabel: "失眠",
        // },
      ],
      themeTypeList2: [
        { dictValue: "", dictLabel: "全部领域" },
        // { dictValue: "1", dictLabel: "情感" },
        // { dictValue: "2", dictLabel: "职场" },
        // { dictValue: "3", dictLabel: "家庭" },
      ],
      topNoticeList: [
        {
          v_seach_v_notice_title: "张三",
          content: "2小时前完成咨询，30秒前发布动态",
        },
        {
          v_seach_v_notice_title: "张三",
          content: "2小时前完成咨询，30秒前发布动态",
        },
        {
          v_seach_v_notice_title: "张三",
          content: "2小时前完成咨询，30秒前发布动态",
        },
        {
          v_seach_v_notice_title: "张三",
          content: "2小时前完成咨询，30秒前发布动态",
        },
        {
          v_seach_v_notice_title: "张三",
          content: "2小时前完成咨询，30秒前发布动态",
        },
        {
          v_seach_v_notice_title: "张三",
          content: "2小时前完成咨询，30秒前发布动态",
        },
      ],
    };
  },
  mounted() {
    this.getThemeList();
    this.getThemeList2();
    this.getNews();
    this.queryMyAttentionList();
  },
  methods: {
    getThemeList() {
      utils.post('psychic/psychicCounselor/psychicCounselorTypeList', {}, res => {
        if (res.success) {
          this.themeTypeList = this.themeTypeList.concat(res.data.rows)
        }
      })
    },
    getThemeList2() {
      utils.post('psychic/psychicCounselor/psychicCounselorareaTypeList', {}, res => {
        if (res.success) {
          this.themeTypeList2 = this.themeTypeList2.concat(res.data.rows)
        }
      })
    },
    handleTypeClick(){ 
      this.getNews();
    },
    handleGoodAreaClick(){ 
      this.getNews();
    },
    doSearch(){
      this.getNews();
    },
    getNews() {
      this.form.type = this.formPolicy.themeType;
      this.form.goodArea = this.formPolicy.themeType2;

      this.form.trueName =this.formPolicy.trueName;
      utils.post("/psychic/psychicCounselor/list", this.form, (res) => {
        if (res.success) {
          this.total = res.data.total;
          this.newsList = res.data.rows; 
        }
      });
    },
    queryMyAttentionList() {//查询我的关注
      utils.post("/psychic/psychicCounselor/myAttentionList", {}, (res) => {
        if (res.success) { 
          this.topNoticeList = res.data.rows;
        }
      });
    },
    sizeChange(val) {
      this.form.pageSize = val;
      this.getNews();
    },
    pageChange(val) {
      this.form.pageNumber = val;
      this.getNews();
    },
    goNewsDetail(id) {
      this.$router.push({
        path: "/Cinziqao/Consult/Detail",
        query: { id: id, activeMenu: "/Cinziqao/Consult" },
      });
    },
    goPoliticalNews(id) {
      this.$router.push({
        path: "/LearningHome/PoliticalNews/NewsDetail",
        query: { id: id, activeMenu: "/LearningHome/PoliticalNews" },
      });
    },
  },
};
</script>
<style lang="less">
.xd-LearningHome-PoliticalNews-NewsHome {
  .news_panel {
    ul.news_list li {
      border-bottom: solid 1px #dcdfe6;
      padding-bottom: 5px;
    }
  }
}
</style>